<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<mescroll-body :ref="'mescrollRef'+i" :height='height' @init="mescrollInit" :down="downOption"
			@down="downCallback" :up="upOption" @up="upCallback">
			<!-- 数据列表 -->
			<view class="shoppingList-wrap" v-for="(item,index) in goods" :key="index" @longpress="longpressFun"
				@click="selectGoods(index)">
				<view class="checkbox" v-if="isEdit">
					<u-checkbox :value="item.isSelect" shape="circle" @tap.stop="changeSelect(index)"></u-checkbox>
				</view>
				<view style="width: 100%;">
					<view class="top">
						<view class="image">
							<u-image width="150rpx" height="150rpx" :src="item.image"></u-image>
							<!-- <image src="../../static/images/accPush.png" class="push" v-show="item.isRecommend==1"></image>
					  <image src="../../static/images/isBest.png" class="best" v-show="item.isBest"></image> -->
						</view>
						<view class="name-wrap">
							<view class="text-name marginB10">{{item.storeName}}</view>
							<view class="text-Number marginB10">{{item.keyword}}</view>
							<view class="selling-price marginB10">
								<view v-if="item.isEurope!=1">{{$t('operate.supplyPrice')}}:￥{{item.cost}}</view>
								<view class="ln-price">{{$t('operate.sellingPrice')}}: ￥<text
										class="priceText">{{item.price}}</text></view>
							</view>
							<view class="ln-price marginB10" v-show="item.isEurope!=1">
								{{$t('operate.expectedEarnings')}}:
								<!--预计收益-->
								<text
									:class="Number(item.price)-Number(item.cost)>=0?'income':'nocome'">￥{{(Number(item.price)-Number(item.cost)).toFixed(2)}}</text>
							</view>
						</view>
					</view>
					<view class="operation">
						<view class="operationLeft">
							<view class="operation-button" @click="handleDelete(item)"
								v-if="tableFrom.pushZoneId=='null'">
								<text class="iconfont icona-quxiaotuijian1"></text>
								<text>{{$t('operate.removeFromZone')}}</text>
								<!--移出专区-->
							</view>
						</view>
						<view class="operationRight">
							<view class="temp">
								<block v-for="(option,optionIndex) in iconList" :key="optionIndex"
									v-if="item.tempId == option.id">
									<image :src="`../../../../static/images/${option.site}.png`" class="shipadd"
										:class="option.site"></image>
									<text class="tempName">{{option.name}}</text>
								</block>
							</view>
							<view class="operation-button" @tap="update(item,index)" :class="{'left':item.isTop}">
								<block v-if="!item.isTop">
									<text class="iconfont iconzhiding"></text>
									<text>{{$t('operate.top')}}</text>
									<!--置顶-->
								</block>
								<block v-else>
									<text class="iconfont iconquxiao"></text>
									<text>{{$t('operate.unpin')}}</text>
									<!--取消置顶-->
								</block>
							</view>
							<!-- <view class="operation-button" @tap.stop="changeGoodsShell(item.id,index)">
								<view v-if="current!=0" class="operation-btn">
									<text class="iconfont icona-shangjia1"></text>上架
								</view>
								<view v-else class="operation-btn">
									<text class="iconfont icona-xiajia1"></text>下架
								</view>
							</view> -->
						</view>

					</view>
				</view>

			</view>
		</mescroll-body>
		<view v-if="isEdit" class="footer" :class="bottomLift!=0?'bottomLift':''"
			:style="{paddingBottom: `${bottomLift}px`}">
			<view>
				<u-checkbox v-model="checkStatus" shape="circle" @change="checkAll">{{$t("goods.selectAll")}}
				</u-checkbox>
			</view>
			<view class="buttonBox">
				<view class="btn" @tap="bulkRemoval()">批量移出</view>
				<view class="btn pushBtn" @tap="complete()">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {
		zoneGoodsList,
		zoneProductDel,
		zoneProductUpdate,
		delBatchZoneProduct
	} from "@/api/store.js";
	import {
		mapGetters
	} from "vuex";
	let app = getApp();
	export default {
		computed: {
			...mapGetters(["iconList"]),
			height() {
				let wHeight = 0
				uni.getSystemInfo({
					success(res) {
						wHeight = res.windowHeight * 2
						console.info(wHeight)
					}
				});
				return wHeight - 186
			},
		},
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			current: Number,
			index: {
				// 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0;
				},
			},
			tableFrom: Object,
			list: {
				// 为了请求数据,演示用,可根据自己的项目判断是否要传
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				downOption: {
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 20, // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				goods: [],
				isEdit: false,
				checkStatus: false,
				bottomLift: app.globalData.bottomLift,
			};
		},
		mounted() {},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				var _this = this;
				this.$nextTick(function() {
					console.info(this.tableFrom, this.list)
					this.tableFrom.zoneProductType = this.list[this.index].value
					zoneGoodsList(this.tableFrom).then((res) => {
						var data = res.data.list;
						if (page.num == 1) _this.goods = [];
						_this.goods = _this.goods.concat(data);
						_this.mescroll.endBySize(data.length, res.data.total);
					}).catch((e) => {
						_this.mescroll.endErr();
						_this.$util.Tips({
							title: e
						});
					});
				})
			},
			handleDelete(item) {
				if (this.isEdit) return
				let _this = this
				uni.showModal({
					title: this.$t('publicLang.hint'),
					content: this.$t('operate.removeItem'),
					cancelText:this.$t('publicLang.cancel'),
					confirmText: this.$t('publicLang.sure'),
					success: function(res) {
						if (res.confirm) {
							zoneProductDel({
								productId: item.id,
								zoneId: _this.tableFrom.zoneId,
							}).then(() => {
								_this.$util.Tips({
									title: _this.$t('operate.removedSuccessfully')
								});
								_this.mescroll.resetUpScroll(false)
							})
						}
					}
				});
			},
			update(item) {
				if (this.isEdit) return
				let _this = this
				zoneProductUpdate({
					productId: item.id,
					zoneId: _this.tableFrom.zoneId,
					isTop: item.isTop == 1 ? 0 : 1
				}).then(() => {
					_this.$util.Tips({
						title: _this.$t('operate.markingSucceeded')
					});
					_this.mescroll.resetUpScroll(false)
				});
			},
			//长按
			longpressFun() {
				console.info(123)
				this.isEdit = true
				this.$refs[`mescrollRef${this.i}`].mescroll.lockDownScroll(this.isEdit);
			},
			//单选
			selectGoods(index) {
				console.info(index)
				this.$set(this.goods[index], "isSelect", this.goods[index].isSelect ? false : true);
			},
			//全选
			checkAll() {
				this.checkStatus = !this.checkStatus
				this.goods.map(i => {
					this.$set(i, "isSelect", this.checkStatus);
				})
			},
			//完成
			complete() {
				this.isEdit = false
				this.checkStatus = false
				this.$refs[`mescrollRef${this.i}`].mescroll.lockDownScroll(this.isEdit);
				this.goods.map(i => {
					this.$set(i, "isSelect", false);
				})
			},
			// 批量移除
			bulkRemoval() {
				let _this = this
				uni.showModal({
					title: this.$t('publicLang.hint'),
					content: this.$t('operate.removeItem'),//确定移除商品吗
					cancelText:this.$t('publicLang.cancel'),
					confirmText: this.$t('publicLang.sure'),
					success: function (res) {
						if (res.confirm) {
							let productIdList = []
							_this.goods.map(i=>{
								if(i.isSelect){
									productIdList.push(i.id)
								}
							})
							let productIds = productIdList.join(',')
							delBatchZoneProduct({
								productIds: productIds,
								zoneId: _this.tableFrom.zoneId,
							}).then(() => {
								_this.$util.Tips({
									title: _this.$t('publicLang.successfulOperation')
								});
								_this.mescroll.resetUpScroll(false)
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
	};
</script>
<style lang="scss" scoped>
	.checkbox {
		display: flex;
		align-items: center;
		width: 30rpx;
	}

	.shoppingList-wrap {
		display: flex;
		background-color: #ffffff;
		border-bottom: 1px solid #f5f5f5;
		padding: 30rpx 20rpx 0;
	}

	.top {
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
	}

	.top .image {
		margin: 0 20rpx;
		width: 160rpx;
		height: 160rpx;
		padding: 5rpx;
		border: 1rpx solid #f5f5f5;
		position: relative;
	}

	.top .image .pic {
		width: 150rpx;
		height: 150rpx;
	}

	.top .image .push {
		width: 90rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.top .image .best {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.name-wrap {
		display: flex;
		flex-direction: column;
		// width: 250rpx;
		margin-left: 10rpx;
		flex: 1;
		font-size: 26rpx;

		.text-name {
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			display: -webkit-box;
			word-wrap: break-word;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		.text-Number {
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.7);
			display: flex;
			align-items: center;
		}

		.selling-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.ln-price {
			font-weight: bold;

			.priceText {
				font-size: 32rpx;
			}
		}


	}

	.operation {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 10rpx;

		.operationLeft {
			width: 160rpx;
			margin: 0 20rpx;
		}

		.operationRight {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 500rpx;
			margin-left: 10rpx;

			.u-icon-class {
				margin-right: 6rpx;
			}

			.shipadd {
				width: 24rpx;
				height: 24rpx;
				vertical-align: middle;
				margin-right: 6rpx;
			}

			.temp {
				width: 200rpx;

				.tempName {
					vertical-align: middle;
				}
			}
		}

		.operation-button {
			font-size: 22rpx;
			font-weight: bold;

			.iconfont {
				font-size: 28rpx;
				margin-right: 8rpx;
			}

			.operation-btn {
				display: flex;
				justify-content: center;

				.btn-image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 4rpx;
				}
			}
		}

		.left {
			margin-left: 40rpx;
		}
	}

	.marginB10 {
		margin-bottom: 10rpx;

		.income {
			color: #ff0000;
		}

		.nocome {
			color: green;
		}
	}

	.footer {
		padding: 0 20rpx;
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		display: flex;
		height: 150rpx;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		font-size: 24rpx;

		.text {
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn {
			padding: 12rpx 30rpx;
			border: 1rpx solid rgb(29, 28, 28);
			border-radius: 10rpx;
			margin-top: 10rpx;
		}

		.btn.pushBtn {
			background: black;
			color: #ffffff;
		}

		.btn~.btn {
			margin-left: 10rpx;
		}

		.buttonBox {
			display: flex;
		}
	}
</style>
